<template>
  <div style="width: 700px">
    <el-form
      :model="formData"
      :rules="rules"
      ref="formDataRef"
      label-width="230px"
      :disabled="userInfo.roleType != 1"
    >
      <el-form-item prop="openCommentType" label="是否开启评论/留言板">
        <el-radio-group v-model="formData.openCommentType">
          <el-radio :value="1">是</el-radio>
          <el-radio :value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="formData.openCommentType == 1">
        <el-form-item prop="changyanAppId" label="畅言appId">
          <el-input v-model.trim="formData.changyanAppId" size="large">
          </el-input>
        </el-form-item>
        <el-form-item prop="changyanAppKey" label="畅言appKey">
          <el-input v-model.trim="formData.changyanAppId" size="large">
          </el-input>
        </el-form-item>
      </template>
      <el-form-item prop="gitPagesType" label="是否开启Git Pages">
        <el-radio-group v-model="formData.gitPagesType">
          <el-radio :value="1">是</el-radio>
          <el-radio :value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="showIcp" label="是否开启公安备案和ICP备案信息">
        <el-radio-group v-model="formData.showIcp">
          <el-radio :value="1">是</el-radio>
          <el-radio :value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="formData.showIcp == 1">
        <el-form-item prop="icpDomain" label="ICP备案域名">
          <el-input v-model.trim="formData.icpDomain" size="large"> </el-input>
        </el-form-item>
        <el-form-item prop="icpNo" label="ICP备案号">
          <el-input v-model.trim="formData.icpNo" size="large"> </el-input>
        </el-form-item>
        <el-form-item prop="policeProvince" label="公安备案信息">
          <el-select
            v-model.trim="formData.policeProvince"
            showSearch
            clearable
          >
            <el-option
              v-for="(item, index) in provinceList"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="policeNo" label="公安备案号">
          <el-input v-model.trim="formData.policeNo" size="large"> </el-input>
        </el-form-item>
      </template>
      <el-form-item label="下载静态页面">
        <a href="javascript:void(0)" class="a-link" @click="createZip()"
          >点击下载</a
        >
      </el-form-item>
      <el-form-item :style="{ width: '100%' }">
        <el-button type="danger" :style="{ width: '100%' }" @click="submitForm"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const formData = ref({});
const formDataRef = ref(null);
const api = {
  getSysSetting: "blog/getSysSetting",
  saveSysSetting: "blog/saveSysSetting",
  createZip: "blog/createZip",
};
const { proxy } = getCurrentInstance();
const userInfo = ref(proxy.VueCookies.get("userInfo"));
const provinceList = [
  "京",
  "津",
  "冀",
  "晋",
  "蒙",
  "辽",
  "吉",
  "黑",
  "沪",
  "苏",
  "浙",
  "皖",
  "闽",
  "赣",
  "鲁",
  "豫",
  "鄂",
  "湘",
  "粤",
  "桂",
  "琼",
  "渝",
  "川",
  "贵",
  "云",
  "藏",
  "陕",
  "甘",
  "青",
  "宁",
  "新",
];
const rules = {
  openCommentType: [{ required: true, message: "是否开启评论不能为空" }],
  changyanAppId: [{ required: true, message: "畅言appId不能为空" }],
  changyanAppKey: [{ required: true, message: "畅言appKey不能为空" }],
  gitPagesType: [{ required: true, message: "是否开启Git Pages不能为空" }],
  showIcp: [
    { required: true, message: "是否开启公安备案和ICP备案信息不能为空" },
  ],
  icpDomain: [{ required: true, message: "ICP备案域名不能为空" }],
  icpNo: [{ required: true, message: "ICP备案号不能为空" }],
  policeProvince: [{ required: true, message: "公安备案省份不能为空" }],
  policeNo: [{ required: true, message: "公安备案号不能为空" }],
};

const getSysSetting = async () => {
  let result = await proxy.Request({
    url: api.getSysSetting,
  });
  // 这个部分代码我好像没写啊
  if (result != null) {
    proxy.Utils.resetObj(formData, result.data);
  }
};
getSysSetting();

const submitForm = () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let params = {};
    params = formData.value;
    let result = await proxy.Request({
      url: api.saveSysSetting,
      params: params,
    });
    if (!result) {
      return;
    }
    ElMessage.success("保存成功");
  });
};

const createZip = async () => {
  let result = await proxy.Request({
    url: api.createZip,
  });
  if (!result) {
    return;
  }
  document.location.href =
    "api/file/download" + result.data + "/" + encodeURI("静态页面.zip");
};
</script>

<style lang="scss" scoped>
.info-link {
  margin-left: 10px;
}
</style>
